<template>
  <div class="left-menu">
    <ul class="menuInfo">
      <li
        v-for="(item, index) in data"
        :key="index"
        :class="{ active: cur == index }"
        @click="handleLevel(item, index)"
      >
        <div>
          {{ item.solutionName || '无' }}
        </div>
      </li>
    </ul>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { solutionList } from "@/api/other";

const cur = ref(0);
const emit = defineEmits(["change"]);
const data = ref();

onMounted(() => {
  getList();
});

// 获取解决方案目录
const getList = () => {
  solutionList({}).then((res: any) => {
    data.value = res.rows;
    if (res.rows.length > 0) {
      emit("change", res.rows[0]);
    }
  });
};

// 切换一级菜单
const handleLevel = (item, index) => {
  cur.value = index;
  emit("change", item);
};
</script>
<style lang="less" scoped>
.left-menu {
  border: 2px solid #fff;
  height: 100%;
  .menuInfo {
    color: #4f5b74;
    height: 100%;
    li {
      margin-top: 20px;
      height: 42px;
      line-height: 42px;
      text-align: right;
      padding: 0 17px;
      font-weight: 700;
      > div {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      &:hover {
        cursor: pointer;
        background: linear-gradient(270deg, #fff 20.83%, rgba(255, 255, 255, 0) 100%);
      }
    }
    .active {
      position: relative;
      background: linear-gradient(270deg, #fff 20.83%, rgba(255, 255, 255, 0) 100%);
      color: #4098ff;
      &::after {
        content: "";
        position: absolute;
        right: -2px;
        top: 0;
        width: 2px;
        height: 42px;
        background-color: #4098ff;
      }
    }
  }
}
</style>
